<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
      
      <el-checkbox-group v-model="shop_ids">
        <el-checkbox :label="item.shop_id" v-for="(item, index) in dict.shopList" :key="index" style="width: 100%;margin-right: 0;">{{ item.shop_name }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { getListingShop, syncListShop } from '@/api/listing'
export default {
  name: 'ShopDialog',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
      return {
        shop_ids: [],
          dict: {
              shopList: [],
          },
          save: false,
          loading: false
      }
  },
  computed: {
      title() {
        
          return `选择店铺`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: { },
  async mounted() { 
    this.loading = true
    try {
      const shopData = await getListingShop()
      this.dict.shopList = shopData?.data ?? []
    } catch (error) {
      
    }
    this.loading = false
   },
  methods: {
      submit() {
         if(this.shop_ids.length == 0) {
          return this.$message.error('请选择店铺')
         }
         this.save = true
          const params = { shop_ids: this.shop_ids, product_ids: this.params.product_ids }
          syncListShop(params).then(()=>{
            this.$message.success('同步成功')
            this.$emit('success',true)
            this.cancel()
          }).finally(()=>{
            this.save = false
          })
              
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style>

</style>
